<template>
  <div class="dl" :style="bgImg">
    <div class="title">
      <font class="h3">码农驿站</font>
    </div>
    <el-carousel
      arrow="never"
      height="500px"
      indicator-position="none"
      ref="titlepmd"
      :autoplay="false"
      class="titlepmditem"
    >
      <el-carousel-item>
        <div class="dlnr">
          <div class="dlitem">
            <br />
            <font class="fontdl">登录</font>
            <br />
            <input class="inputdl" v-model="dlmailbox" placeholder="邮箱" />
            <br />
            <input class="inputdl" v-model="dlpassword" type="password" placeholder="密码" />
            <div class="jzw">
              <input class="feuit" @click="jzw" name="Fruit" type="checkbox" value />
              <font class="jzwfont">记住我</font>
            </div>
            <div class="btu">
              <div class="dlbtu" @click="dl()">登录</div>
              <div class="zcbtu" @click="setActiveItem(1)">注册</div>
            </div>
          </div>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div class="dlnr">
          <div class="dlitem">
            <br />
            <font class="fontdl">注册</font>

            <br />
            <input class="inputd2" placeholder="邮箱(唯一登录凭证)" v-model="zcmailbox" />
            <br />
            <input class="inputd2" type="password" placeholder="密码" v-model="zcpassword" />
            <br />
            <input class="inputd2" type="password" placeholder="确认密码" v-model="zcqrpassword" />
            <br />
            <input class="inputd2" placeholder="真实姓名" v-model="zcname" />
            <br />
            <div class="tesgu">
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
              <font class="sr">生日:</font>
              <el-date-picker
                v-model="value1"
                type="date"
                size="small"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>
            <input class="inputd2" placeholder="昵称" v-model="zcnickname" />
            <br />
            <input class="inputd2" placeholder="个人简介" v-model="zcautograph" />
            <br />
            <br />
            <div class="dyhdm">
              <font class="sr2">写出第一行代码的时间:</font>
              <el-date-picker
                v-model="value2"
                type="date"
                size="small"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </div>

            <div class="btu">
              <div class="dlbtu" @click="setActiveItem(0)">登录</div>
              <div class="zcbtu" @click="zhuce">注册</div>
            </div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      bgImg: {
        backgroundImage: "url(" + require("../../assets/dlbj.jpg") + ")",
        height: "900px"
      },
      radio: "1",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      zcmailbox: "",
      zcpassword: "",
      zcname: "",
      zcautograph: "",
      zcqrpassword: "",
      zcnickname: "",
      imageUrl: "",
      dlmailbox: "",
      dlpassword: "",
      jzwdata: false
    };
  },
  methods: {
    ...mapMutations(["xguser"]),
    jzw() {
      this.jzwdata = !this.jzwdata;
    },
    dl() {
      this.$http
        .post(this.poot + "login", {
          mailbox: this.dlmailbox,
          password: this.dlpassword
        })
        .then(response => {
          if (response.data == "ok") {
            this.xguser(this.dlmailbox);
            this.$router.push("/home");
            if (this.jzwdata) {  
              localStorage.setItem("mailbox", this.dlmailbox);
              localStorage.setItem("password", this.dlpassword);
            }
          } else {
            const h = this.$createElement;
            this.$notify({
              title: "温馨提示",
              message: h(
                "i",
                { style: "color: teal" },
                "注意密码或者账号是否错误"
              )
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    zhuce() {
      var email = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!email.test(this.zcmailbox)) {
        const h = this.$createElement;
        this.$notify({
          title: "温馨提示",
          message: h("i", { style: "color: teal" }, "输入正确的邮箱")
        });
      } else {
        if (
          this.zcpassword == this.zcqrpassword &&
          this.zcpassword.length > 0
        ) {
          if (
            this.zcname.length > 0 &&
            this.value1.length > 0 &&
            this.value2.length > 0 &&
            this.zcnickname.length > 0
          ) {
            this.$http
              .post(this.poot + "registeruser", {
                name: this.zcname,
                birthday: this.value1,
                gender: this.radio,
                nickname: this.zcnickname,
                autograph: this.zcautograph,
                password: this.zcpassword,
                mailbox: this.zcmailbox,
                firstlinecode: this.value2
              })
              .then(response => {
                if (response.data == "ok") {
                  this.setActiveItem(0);
                  const h = this.$createElement;
                  this.$notify({
                    title: "温馨提示",
                    message: h(
                      "i",
                      { style: "color: teal" },
                      "注册成功，请登录"
                    )
                  });
                } else {
                  const h = this.$createElement;
                  this.$notify({
                    title: "温馨提示",
                    message: h("i", { style: "color: teal" }, response.data)
                  });
                }
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            const h = this.$createElement;
            this.$notify({
              title: "温馨提示",
              message: h("i", { style: "color: teal" }, "注意判空")
            });
          }
        } else {
          const h = this.$createElement;
          this.$notify({
            title: "温馨提示",
            message: h("i", { style: "color: teal" }, "秘密不一致或者为空")
          });
        }
      }
    },
    setActiveItem(index) {
      this.$refs.titlepmd.setActiveItem(index);
    }
  },
  computed: {
    ...mapState(["leixing"]),
    ...mapState(["poot"]),
    ...mapState(["user"]),
    ...mapState(["gerenindex"])
  },
  mounted() {

  }
};
</script>
<style scoped>
.el-radio {
  width: 10px;
}
.tesgu {
  margin-top: 10px;
}
.sr2 {
  font-size: 15px;
  color: #696a6a;
  margin-right: 70px;
}
.dyhdm {
  margin-left: 50px;
}
.sr {
  margin-left: 50px;
  font-size: 15px;
  color: #696a6a;
}
.el-radio {
  margin-top: 10px;
  margin-left: 50px;
}
.btu {
  display: flex;
}
.inputd2 {
  margin-top: 10px;
  margin-left: 50px;
  width: 80%;
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px #fff solid;
  color: #fff;
  font-size: 15px;
}
.jzw {
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #fff;
}
.feuit {
  height: 15px;
  margin-left: 50px;
  width: 15px;
  margin-right: 20px;
}
.dlbtu {
  border: 1px #fff solid;
  height: 50px;
  width: 200px;
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 20px;
}
.zcbtu {
  border: 1px #fff solid;
  height: 50px;
  width: 200px;
  margin: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 20px;
  background-color: #fff;
}
.inputdl {
  margin-top: 80px;
  margin-left: 50px;
  width: 80%;
  border: 0;
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1px #fff solid;
  color: #fff;
  font-size: 15px;
}
.fontdl {
  margin: 50px;
  color: #fff;
  font-size: 30px;
}
.title {
  text-align: center;
}
.h3 {
  color: #fff;
  font-size: 50px;
  font-weight: "20";
}
.dlitem {
  width: 90%;
  height: 100%;
}

.dl {
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 400px;
  padding-right: 400px;
}
.dlnr {
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #161616;
  opacity: 0.9;
}
</style>